<!-- pages/fullscreen-preview/fullscreen-preview.vue -->
<template>
  <view class="preview-container">
    <!-- Image full-screen preview -->
    <ImagePreview :imageSrc="mediaSrc" :visible="isImageVisible" @update:visible="isImageVisible = $event" />
    <!-- Video full-screen preview -->
    <VideoPreview :videoSrc="mediaSrc" :visible="isVideoVisible" @update:visible="isVideoVisible = $event" />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import ImagePreview from './components/ImagePreview.vue'
import VideoPreview from './components/VideoPreview.vue'

const mediaType = ref('image')  // image or video
const mediaSrc = ref('')
const isImageVisible = ref(false)
const isVideoVisible = ref(false)

onLoad((options) => {
  // Retrieve the query parameters directly
  const { type, src } = options
  mediaType.value = type
  mediaSrc.value = src

  if (mediaType.value === 'image') {
    isImageVisible.value = true
  } else if (mediaType.value === 'video') {
    isVideoVisible.value = true
  }
})
</script>

<style scoped>
.preview-container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
